<template>
  <el-table style="width: 100%" highlight-current-row="true" :data="shownData">
    <el-table-column label="订单编号" prop="orderid"> </el-table-column>
    <el-table-column label="订单时间" prop="orderDate"> </el-table-column>
    <el-table-column label="订单用户" prop="orderName"> </el-table-column>
    <el-table-column label="电话号码" prop="orderPho"> </el-table-column>
    <el-table-column label="订单金额" prop="orderPrice"> </el-table-column>
    <el-table-column label="房间类型" prop="roomName"> </el-table-column>
    <el-table-column align="right">
      <template slot="header" slot-scope="scope" :keys="console.log(scope)">
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template slot-scope="scope">
        <el-button size="mini" @click="showDetail(scope.$index)"
          >详情</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="handleDelete(scope.$index, scope.row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "getOrder",
  data() {
    return {
      userData: [
        {
          orderid: "789789",
          orderDate: "2021-9-14",
          orderName: "唐浩天",
          orderPho: "18923890",
          orderPrice: "758",
          roomName: "大床房",
          checkinData: "2021-9-12",
          checkoutData: "2021-9-15",
        },
        {
          orderid: "345345",
          orderDate: "2021-9-7",
          orderName: "周杰伦",
          orderPho: "189238902131",
          orderPrice: "758",
          roomName: "大床房",
        },
        {
          orderid: "123123",
          orderDate: "2021-9-13",
          orderName: "王力宏",
          orderPho: "18923891230",
          orderPrice: "758",
          roomName: "大床房",
        },
      ],
      search: "",
    };
  },
  computed: {
    shownData() {
      var returnData1 = this.userData.filter((obj) => {
        return obj.orderName.indexOf(this.search) !== -1;
      });
      var returnData2 = this.userData.filter((obj) => {
        return obj.orderid.indexOf(this.search) !== -1;
      });
      var returnData3 = this.userData.filter((obj) => {
        return obj.orderPho.indexOf(this.search) !== -1;
      });
      var returnData = returnData1.concat(returnData2, returnData3);

      return Array.from(new Set(returnData));
    },
  },
  methods: {
    showDetail(index) {
      const h = this.$createElement;
      /* console.log(this.shownData[index]); */
      this.$msgbox({
        title: "订单详情",
        
        confirmButtonText:'关闭',
        message: h("p", null, [
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '订单编号'+':  '+this.shownData[index].orderid),
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '订单日期'+':  '+this.shownData[index].orderDate),
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '用户姓名'+':  '+this.shownData[index].orderName),
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '用户电话'+':  '+this.shownData[index].orderPho),
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '订单价格'+':  '+this.shownData[index].orderPrice),
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '房间类型'+':  '+this.shownData[index].roomName),
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '入住时间'+':  '+this.shownData[index].checkinData),
          h("p",  { style: 'textAlign:left,marginLeft:28px' } , '离开时间'+':  '+this.shownData[index].checkoutData),
        ]),

      });
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style  scoped>
</style>>

